<template>
  <div style v-loading="formLoading">
    <el-table
      :data="activitiesListData"
      :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}"
      row-key="id"
      fit
      highlight-current-row
      class="table c-width100 color-222 family-PingFangSC-Regular font-s12"
    >
      <el-table-column align="center" label="活动名称">
        <template slot-scope="scope">
          <div class="clearfix">
            <div class="fl margin-r">
              <img
                :src="scope.row.poster|| defultImg"
                height="68"
                width="102"
                alt
                @error="setDefultImg"
              />
            </div>
            <div class="fl">
              <div
                class="font-s14 color-222 text-alignL line-limit-length250"
                :title="scope.row.name"
              >{{scope.row.name}}</div>
              <div
                class="font-s12 color-999 text-alignL line-limit-length250"
                :title="scope.row.place"
              >{{scope.row.place}}</div>
              <div class="font-s12 color-999 text-alignL">{{scope.row.enrollDate}}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="80" align="center" label="状态">
        <template slot-scope="scope">
          <span>{{scope.row.enrollStatus}}</span>
        </template>
      </el-table-column>
      <el-table-column width="80" align="center" prop="cateName" label="分类"></el-table-column>
      <el-table-column width="300" align="center" label="报名详情">
        <template slot-scope="scope">
          <div class="clearfix">
            <div class="c-mb10 fl c-ww50">
              <p class="color-999">
                <span class="c-d-inlineb c-ww50">报名人数</span>
                <span class="c-d-inlineb c-ww50">报名成功</span>
              </p>
              <p>
                <span class="c-d-inlineb c-ww50">{{scope.row.enrollNum}}</span>
                <span class="c-d-inlineb c-ww50">{{scope.row.enrollChecked}}</span>
              </p>
            </div>
            <div class="fl c-ww50">
              <p class="color-999">
                <span class="c-d-inlineb c-ww50">待审核</span>
                <span class="c-d-inlineb c-ww50">未付款</span>
              </p>
              <p>
                <span class="c-d-inlineb c-ww50">{{scope.row.enrollUnCheck}}</span>
                <span class="c-d-inlineb c-ww50">{{scope.row.enrollRetuen}}</span>
              </p>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <div class="text-alignL" v-if="permission == 3">
            <b
              @click="linkToEdit(scope.row.activityId)"
            >{{scope.row.enrollStatus=='已结束'? '查看': '编辑'}}</b>
            <span class="color-409">|</span>
            <b
              v-if="scope.row.enrollStatus=='未发布'"
              @click="publishActivity(scope.row.activityId,scope.row.hasTicket)"
            >发布活动</b>
            <span v-if="scope.row.enrollStatus =='未发布'" class="color-409">|</span>
            <b
              v-if="scope.row.enrollStatus=='已发布'"
              @click="cancelPublish(scope.row.activityId)"
            >取消发布</b>
            <span v-if="scope.row.enrollStatus =='已发布'" class="color-409">|</span>
            <el-dropdown @command="handleCommand" v-if="permission == 3">
              <span class="el-dropdown-link family-PingFangSC-Regular">
                更多
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{ id: scope.row.activityId, name:'a'}">签到二维码</el-dropdown-item>
                <el-dropdown-item :command="{ id: scope.row.activityId, name:'b'}">复制链接</el-dropdown-item>
                <el-dropdown-item
                  v-if="scope.row.enrollStatus =='已发布'"
                  :command="{ id: scope.row.activityId, name:'c'}"
                >微信推送</el-dropdown-item>
                <el-dropdown-item
                  v-if="scope.row.enrollStatus !='已结束'"
                  :command="{ id: scope.row.activityId, name:'d'}"
                >结束活动</el-dropdown-item>
                <el-dropdown-item :command="{ id: scope.row.activityId, name:'e'}">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="text-alignL">
            <b @click="signManage(scope.row.activityId)">签到管理</b>
            <span class="color-409">|</span>
            <b @click="linkToUserList(scope.row.activityId)">名单管理</b>
            <span class="color-409">|</span>
            <b @click="showMessage(scope.row)">平台消息推送</b>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="消息推送" :visible.sync="showMessagePush" width="50%">
      <el-form :model="message" ref="message" label-width="100px" class="demo-ruleForm">
        <el-form-item label="消息标题" prop="messageTile">
          <el-input v-model="message.messageTile"></el-input>
        </el-form-item>
        <el-form-item label="标题内容" prop="messageDesc">
          <el-input type="textarea" v-model="message.messageDesc"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="showMessagePush = false">取 消</el-button>
        <el-button type="primary" @click="pushMessage('message')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { addOrEditActivities } from "@/api/activities";
import { pushMessage } from "@/api/course";

import defultImg from "@/assets/defult270.png";
export default {
  props: [
    "permission",
    "activitiesListData",
    "activityInfo",
    "isShowWechatPush"
  ],
  data() {
    return {
      defultImg,
      formLoading: false,
      inputParam: {
        id: -1,
        activityId: -1,
        userId: -1,
        actTicketId: -1,
        orderId: -1,
        name: "",
        opType: 3,
        mobile: "",
        fieldVal1: "",
        fieldVal2: "",
        fieldVal3: "",
        fieldVal4: "",
        fieldVal5: "",
        enrollTime: "",
        signUpTime: "",
        issuccess: -1
      },
      signList: [],
      listLoading: false,
      tsData: [],
      message: {
        messageTile: "",
        messageDesc: "",
        typeId: "",
        messageTypeStatus: 2,
        messageTypes: 0
      },
      showMessagePush: false
    };
  },
  methods: {
    showMessage(item) {
      this.message.typeId = item.activityId;
      this.showMessagePush = true;
    },
    pushMessage() {
      if (this.message.messageTile == "") {
        this.$message("请填写消息标题");
        return;
      }
      if (this.message.messageDesc == "") {
        this.$message("请填写消息描述");
        return;
      }
      pushMessage(this.message).then(res => {
        this.$message(res.data.data);
      });
      this.showMessagePush = false;
      this.message = {
        messageTile: "",
        messageDesc: "",
        typeId: "",
        messageTypeStatus: 2,
        messageTypes: 0
      };
    },
    signManage(id) {
      this.$router.push({ path: `/activities/signManage/${id}` });
    },
    handleCommand(command) {
      // this.$message('click on item ' + command)
      if (command.name == "a") {
        this.linkToQrcode(command.id);
      } else if (command.name == "b") {
        this.$emit("linckDetail", command.id);
      } else if (command.name == "c") {
        // this.pushToWechat()
        for (var i = 0; i < this.activitiesListData.length; i++) {
          if (this.activitiesListData[i].activityId == command.id) {
            this.tsData = [this.activitiesListData[i]];
            break;
          }
        }
        this.$emit("wechat", this.tsData);
      } else if (command.name == "d") {
        this.stopActivity(command.id);
      } else {
        this.deleteActivity(command.id);
      }
    },

    linkToEdit(id) {
      this.$router.push({ path: `/activities/edit/${id}` });
      // this.$router.push({ path: `/activities/edit/`, query: { activityId: id }})
    },
    linkToUserList(id) {
      this.$router.push({ path: `/activities/userList/${id}` });
    },
    linkToTicket() {
      this.$router.push({ path: `/activities/ticketManage` });
    },
    linkToEnroll() {
      this.$router.push({ path: `/activities/enrollForm` });
    },
    linkToQrcode(id) {
      this.$router.push({ path: `/activities/qrcode/${id}` });
    },
    deleteActivity(id) {
      // 删除活动
      this.$confirm("此操作将永久删除该活动, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.activityInfo.activityId = id;
          this.activityInfo.opType = 3;
          this.formLoading = true;
          addOrEditActivities(this.activityInfo).then(res => {
            this.formLoading = false;
            if (res.data.data.retError == 0) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });

              this.$emit("fresh");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    cancelPublish(id) {
      // 取消发布活动
      this.$confirm("取消该已发布活动?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.activityInfo.activityId = id;
          this.activityInfo.opType = 4;
          this.activityInfo.audience = "";
          this.formLoading = true;
          addOrEditActivities(this.activityInfo).then(res => {
            if (res.data.data.retError == 0) {
              this.formLoading = false;
              this.$message({
                type: "success",
                message: "取消发布!"
              });
              this.$emit("fresh");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "用户关闭弹框"
          });
        });
    },
    stopActivity(id) {
      // 结束活动
      this.$confirm("确定结束活动?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.activityInfo.activityId = id;
          this.activityInfo.opType = 5;
          this.formLoading = true;
          addOrEditActivities(this.activityInfo).then(res => {
            this.formLoading = false;
            if (res.data.data.retError == 0) {
              this.$message({
                type: "success",
                message: "该活动已结束!"
              });
              this.$emit("fresh");
            }
          });
        })
        .catch(() => {
          this.formLoading = false;
          this.$message({
            type: "info",
            message: "用户关闭弹框"
          });
        });
    },
    pushToWechat() {
      // 微信推送
      this.$confirm("确定推送该活动?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "推送成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "用户关闭弹框"
          });
        });
    },
    publishActivity(id, isTicket) {
      // 发布活动
      if (isTicket == 0) {
        this.$message({
          type: "info",
          message: "您还没设置票务，请先设置票务再发布"
        });
        return;
      }
      this.$confirm("确定发布该活动?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.activityInfo.activityId = id;
          this.activityInfo.opType = 6;
          this.activityInfo.audience = "";
          this.formLoading = true;
          addOrEditActivities(this.activityInfo).then(res => {
            this.formLoading = false;
            if (res.data.data.retError == 0) {
              this.$message({
                type: "success",
                message: "发布成功!"
              });
              this.$emit("fresh");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "用户关闭弹框"
          });
        });
    },
    setDefultImg(e) {
      e.target.src = defultImg;
    }
  }
};
</script>

<style scoped>
.el-dropdown-link {
  font-size: 14px;
  padding: 0px;
  cursor: pointer;
  color: #409eff;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.c-d-inlineb {
  display: inline-block;
}
.c-ww50 {
  width: 50%;
}
</style>
